<template>
    <div class="in-controls-attributes">
        <div v-if="select.action">
            <div style="padding: 10px 0;">
                <span>类型：{{ select.label }}</span>
            </div>
            <component :is="select.config()" v-model="select" />
        </div>
        <div class="action-no" v-if="!select.action">
            <el-empty description="请选择组件" />
        </div>
    </div>
</template>

<script setup>
import inevent from '../../utils/event';
let select = reactive({});
const emits = defineEmits();
inevent.add("controls-attributes-event", ({ element }) => {
    if (element != select || !element.action) {
        select.action = false;
        select = element;
        select.action = !element.action;
    } else {
        select.action = false;
        select = reactive({});
    }
    emits("selectAttribute", "control");
});
</script>
<style>
.in-controls-attributes {
    .action-no {
        display: flex;
        color: #0052cc;
        justify-items: center;
        align-items: center;
        align-content: center;
        justify-content: center;
        padding: 50px 0;
    }


    .ep-form-item__content {
        .ep-radio-group {
            font-size: 16px;
        }
    }

    --ep-font-size-base {
        font-size: 18px;
    }

    --ep-text-color-regular {
        color: #000;
    }

}
</style>